<template>
	<view class="content">

		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<view class="title">{{title}}</view>
		</view>

		<view class="text-area">
			<button @click="createLocalPushMsg">手动发消息提醒</button>
		</view>
		<view class="text-area">
			<button @click="showAlert">showAlert</button>
		</view>
		<view class="text-area">
			<button type="button" @click="connectMqtt">connectMqtt</button>
		</view>
		<view class="text-area">
			<button type="button" @click="subscribeMqtt">subscribeMqtt</button>
		</view>
		<view class="text-area">
			<button type="button" @click="publishMqtt">publishMqtt</button>
		</view>
		<view class="text-area">
			<button type="button" @click="disconnetMqtt">disconnetMqtt</button>
		</view>
	</view>
</template>

<script>
	import {
		mqttHelper
	} from '../../utils/mqttHelper.js'
	import utils from "../../utils/util.js"
	export default {
		data() {
			return {
				title: 'Hello Uni App',
				imageValue: []
			}
		},
		onLoad() {
			// #ifdef APP-PLUS
			plus.push.addEventListener('click', function(msg) {
				// 分析msg.payload处理业务逻辑 
				console.log('You clicked: ' + msg.content);
			}, false);
			// #endif

			uni.$on('sendTopicMsg', (res) => {
				console.log('mqtt收到消息: ' + decodeURIComponent(res));
				// #ifdef MP-WEIXIN
				uni.showToast({
					title: decodeURIComponent(res)
				})
				// #endif
				// #ifdef APP-PLUS
				var options = {
					cover: false
				};
				plus.push.createMessage("mqtt收到消息：" + decodeURIComponent(res), 'MqttMSG', options);
				// #endif
			})
		},
		methods: {
			connectMqtt() {
				var options = {
					clean: true,
					connectTimeout: 50000,
					clientId: 'emqx_test',
					username: 'wyc_test',
					password: 'wyc_test365',
					keepalive: 30,
				};
				// #ifdef APP-PLUS
				var pinf = plus.push.getClientInfo();
				var clientId = pinf.clientid; //客户端标识
				options.clientId = clientId
				mqttHelper.connect(options)
				// #endif
				// #ifdef H5
				options.clientId = 'emqx_test'
				mqttHelper.connect(options)
				// #endif
				// #ifdef MP-WEIXIN
				let clientId = "mqtt_" + Math.random().toString(16).substr(2, 8);
				options.clientId = clientId
				mqttHelper.connect(options)
				// #endif
			},
			subscribeMqtt() {
				mqttHelper.subscribe('test')
			},
			publishMqtt() {
				mqttHelper.publish('test')
			},
			disconnetMqtt() {
				mqttHelper.disconnet()
			},
			
			createLocalPushMsg() {
				// #ifdef APP-PLUS
				var appid = plus.runtime.appid;
				plus.push.setAutoNotification(true);
				console.log('应用的 appid 为：' + appid);
				var info = plus.push.getClientInfo();
				console.log(JSON.stringify(info));
				var options = {
					cover: false
				};
				var str = utils.dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss');
				str += ": 欢迎使用HTML5+创建本地消息！";
				plus.push.createMessage(str, "LocalMSG", options);
				// #endif
			},
			showAlert() {
				// #ifdef APP-PLUS
				plus.nativeUI.alert("Hello HTML5 plus!", function() {
					console.log("User pressed!");
				}, "nativeUI", "OK");
				// #endif
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 80rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 30rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
		flex-direction: column;
		margin-bottom: 30rpx;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
